﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JQUERY AJAX LOAD</title>
    <script src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var textBoxes = $('input[type="text"]');
            textBoxes.focus(function () {
                //var helpDiv = $(this).attr('id') + 'HelpDiv';
                //$('#' + helpDiv).load('help.html #' + helpDiv);
                var helpDiv = $(this).attr('id')
                $('#' + helpDiv + 'helpDiv').load('GetHelpText.aspx', { helpTextKey: helpDiv });
            });
            textBoxes.blur(function () {
                var helpDiv = $(this).attr('id') + 'HelpDiv';
                $('#' + helpDiv).html('');
            });
        });

    </script>
</head>
<body style="font-family:Arial">
    <table>
        <tr>
            <td>First Name</td>
            <td><input id="firstName" type="text" /></td>
            <td><div id="firstNameHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><input id="lastName" type="text" /></td>
            <td><div id="lastNameHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input id="email" type="text" /></td>
            <td><div id="emailHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Income</td>
            <td><input id="income" type="text" /></td>
            <td><div id="incomeHelpDiv"></div></td>
        </tr>
    </table>
</body>
</html>
